@extends('plugin.hostserver.front.layout.base')
@section('add_css')
    <style>
        /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */


        /**
         * 1. Change the default font family in all browsers (opinionated).
         * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
         */

        html {
            font-size: 16px;
            font-family: sans-serif;
            /* 1 */
            -ms-text-size-adjust: 100%;
            /* 2 */
            -webkit-text-size-adjust: 100%;
            /* 2 */
        }


        /**
         * Remove the margin in all browsers (opinionated).
         */

        body {
            margin: 0;
        }


        /* HTML5 display definitions
           ========================================================================== */


        /**
         * Add the correct display in IE 9-.
         * 1. Add the correct display in Edge, IE, and Firefox.
         * 2. Add the correct display in IE.
         */

        article,
        aside,
        details,

            /* 1 */

        figcaption,
        figure,
        footer,
        header,
        main,

            /* 2 */

        menu,
        nav,
        section,
        summary {
            /* 1 */
            display: block;
        }


        /**
         * Add the correct display in IE 9-.
         */

        audio,
        canvas,
        progress,
        video {
            display: inline-block;
        }


        /**
         * Add the correct display in iOS 4-7.
         */

        audio:not([controls]) {
            display: none;
            height: 0;
        }


        /**
         * Add the correct vertical alignment in Chrome, Firefox, and Opera.
         */

        progress {
            vertical-align: baseline;
        }


        /**
         * Add the correct display in IE 10-.
         * 1. Add the correct display in IE.
         */

        template,

            /* 1 */

        [hidden] {
            display: none;
        }


        /* Links
           ========================================================================== */


        /**
         * 1. Remove the gray background on active links in IE 10.
         * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
         */

        a {
            background-color: transparent;
            /* 1 */
            -webkit-text-decoration-skip: objects;
            /* 2 */
        }


        /**
         * Remove the outline on focused links when they are also active or hovered
         * in all browsers (opinionated).
         */

        a:active,
        a:hover {
            outline-width: 0;
        }


        /* Text-level semantics
           ========================================================================== */


        /**
         * 1. Remove the bottom border in Firefox 39-.
         * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
         */

        abbr[title] {
            border-bottom: none;
            /* 1 */
            text-decoration: underline;
            /* 2 */
            text-decoration: underline dotted;
            /* 2 */
        }


        /**
         * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
         */

        b,
        strong {
            font-weight: inherit;
        }


        /**
         * Add the correct font weight in Chrome, Edge, and Safari.
         */

        b,
        strong {
            font-weight: bolder;
        }


        /**
         * Add the correct font style in Android 4.3-.
         */

        dfn {
            font-style: italic;
        }


        /**
         * Correct the font size and margin on `h1` elements within `section` and
         * `article` contexts in Chrome, Firefox, and Safari.
         */

        h1 {
            font-size: 2em;
            margin: 0.67em 0;
        }


        /**
         * Add the correct background and color in IE 9-.
         */

        mark {
            background-color: #ff0;
            color: #000;
        }


        /**
         * Add the correct font size in all browsers.
         */

        small {
            font-size: 80%;
        }


        /**
         * Prevent `sub` and `sup` elements from affecting the line height in
         * all browsers.
         */

        sub,
        sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }

        sub {
            bottom: -0.25em;
        }

        sup {
            top: -0.5em;
        }


        /* Embedded content
           ========================================================================== */


        /**
         * Remove the border on images inside links in IE 10-.
         */

        img {
            border-style: none;
        }


        /**
         * Hide the overflow in IE.
         */

        svg:not(:root) {
            overflow: hidden;
        }


        /* Grouping content
           ========================================================================== */


        /**
         * 1. Correct the inheritance and scaling of font size in all browsers.
         * 2. Correct the odd `em` font sizing in all browsers.
         */

        code,
        kbd,
        pre,
        samp {
            font-family: monospace, monospace;
            /* 1 */
            font-size: 1em;
            /* 2 */
        }


        /**
         * Add the correct margin in IE 8.
         */

        figure {
            margin: 1em 40px;
        }


        /**
         * 1. Add the correct box sizing in Firefox.
         * 2. Show the overflow in Edge and IE.
         */

        hr {
            box-sizing: content-box;
            /* 1 */
            height: 0;
            /* 1 */
            overflow: visible;
            /* 2 */
        }


        /* Forms
           ========================================================================== */


        /**
         * 1. Change font properties to `inherit` in all browsers (opinionated).
         * 2. Remove the margin in Firefox and Safari.
         */

        button,
        input,
        select,
        textarea {
            font: inherit;
            /* 1 */
            margin: 0;
            /* 2 */
        }


        /**
         * Restore the font weight unset by the previous rule.
         */

        optgroup {
            font-weight: bold;
        }


        /**
         * Show the overflow in IE.
         * 1. Show the overflow in Edge.
         */

        button,
        input {
            /* 1 */
            overflow: visible;
        }


        /**
         * Remove the inheritance of text transform in Edge, Firefox, and IE.
         * 1. Remove the inheritance of text transform in Firefox.
         */

        button,
        select {
            /* 1 */
            text-transform: none;
        }


        /**
         * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
         *    controls in Android 4.
         * 2. Correct the inability to style clickable types in iOS and Safari.
         */

        button,
        html [type="button"],

            /* 1 */

        [type="reset"],
        [type="submit"] {
            -webkit-appearance: button;
            /* 2 */
        }


        /**
         * Remove the inner border and padding in Firefox.
         */

        button::-moz-focus-inner,
        [type="button"]::-moz-focus-inner,
        [type="reset"]::-moz-focus-inner,
        [type="submit"]::-moz-focus-inner {
            border-style: none;
            padding: 0;
        }


        /**
         * Restore the focus styles unset by the previous rule.
         */

        button:-moz-focusring,
        [type="button"]:-moz-focusring,
        [type="reset"]:-moz-focusring,
        [type="submit"]:-moz-focusring {
            outline: 1px dotted ButtonText;
        }


        /**
         * Change the border, margin, and padding in all browsers (opinionated).
         */

        fieldset {
            border: 1px solid #c0c0c0;
            margin: 0 2px;
            padding: 0.35em 0.625em 0.75em;
        }


        /**
         * 1. Correct the text wrapping in Edge and IE.
         * 2. Correct the color inheritance from `fieldset` elements in IE.
         * 3. Remove the padding so developers are not caught out when they zero out
         *    `fieldset` elements in all browsers.
         */

        legend {
            box-sizing: border-box;
            /* 1 */
            color: inherit;
            /* 2 */
            display: table;
            /* 1 */
            max-width: 100%;
            /* 1 */
            padding: 0;
            /* 3 */
            white-space: normal;
            /* 1 */
        }


        /**
         * Remove the default vertical scrollbar in IE.
         */

        textarea {
            overflow: auto;
        }


        /**
         * 1. Add the correct box sizing in IE 10-.
         * 2. Remove the padding in IE 10-.
         */

        [type="checkbox"],
        [type="radio"] {
            box-sizing: border-box;
            /* 1 */
            padding: 0;
            /* 2 */
        }


        /**
         * Correct the cursor style of increment and decrement buttons in Chrome.
         */

        [type="number"]::-webkit-inner-spin-button,
        [type="number"]::-webkit-outer-spin-button {
            height: auto;
        }


        /**
         * 1. Correct the odd appearance in Chrome and Safari.
         * 2. Correct the outline style in Safari.
         */

        [type="search"] {
            -webkit-appearance: textfield;
            /* 1 */
            outline-offset: -2px;
            /* 2 */
        }


        /**
         * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
         */

        [type="search"]::-webkit-search-cancel-button,
        [type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }


        /**
         * Correct the text style of placeholders in Chrome, Edge, and Safari.
         */

        ::-webkit-input-placeholder {
            color: inherit;
            opacity: 0.54;
        }


        /**
         * 1. Correct the inability to style clickable types in iOS and Safari.
         * 2. Change font properties to `inherit` in Safari.
         */

        ::-webkit-file-upload-button {
            -webkit-appearance: button;
            /* 1 */
            font: inherit;
            /* 2 */
        }

        html {
            font-size: 16px;
        }

        body {
            margin: 0;
            padding: 0;
            letter-spacing: .0625rem;
            font-size: 0.625rem;
        }

        .container_base {
            width: 23.125rem;
            margin: .6rem auto 1.8rem auto;
            margin-top: 25rem;
        }

        span.header {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 3rem;
            line-height: 3rem;
            text-align: center;
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: #333333;
        }

        u {
            display: inline-block;
            text-decoration: none;
            border-bottom: .15rem solid #69af07;
        }

        div.item {
            width: 100%;
            height: 29.875rem;
            margin-bottom: 3.25rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .item:last-child {
            margin-bottom: 165rem;
        }

        div.item-box {
            display: inline-block;
            width: 47%;
            height: 18rem;
            margin-bottom: 1rem;
            overflow: hidden;
            box-shadow: 1px 1px 4px rgba(0, 0, 0, .4)
        }

        span.head {
            display: block;
            height: 3rem;
            line-height: 3rem;
            font-size: 1rem;
            text-align: center;
            color: white;
            background-color: #69af07;
        }

        div.content-box {
            width: 10rem;
            height: 5rem;
            padding: 0 0.5rem;
            box-sizing: border-box;
        }

        span.money {
            display: block;
            width: 100%;
            height: 2.8rem;
            line-height: 2.5rem;
            font-size: 0.9rem;
            font-weight: bold;
            padding-right: 3rem;
            margin-bottom: 1.5rem;
            color: #69af07;
        }

        t {
            font-size: 0.8rem;
        }

        .money div:first-child {
            width: 100%;
            height: 1rem;
        }

        .money div:nth-child(2) {
            width: 100%;
            height: 1rem;
        }

        .money div:nth-child(3) {
            width: 100%;
            height: 1rem;
        }

        span.time {
            display: block;
            width: 100%;
            height: 2rem;
            line-height: 1rem;
            font-weight: bold;
            margin-bottom: .5rem;
        }

        span.time:after {
            content: '';
            height: 0;
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        i {
            float: left;
            font-size: 0.625rem;
            font-style: normal;
        }

        .right {
            float: left;
            color: #69af07;
        }

        span.jindu {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 1rem;
            padding-top: 0.1rem;
            border-top: .0625rem solid black;
        }

        span.fuwu {
            display: flex;
            align-items: center;
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            justify-content: space-between;
        }

        span.fuwu:after {
            content: '';
            height: 0;
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .fuwu-box {
            float: left;
            width: 2rem;
            height: .2rem;
            vertical-align: middle;
            display: flex;
            align-items: center;
        }

        .fuwu-box2 {
            float: right;
            width: 2rem;
            height: .2rem;
            vertical-align: middle;
            display: flex;
            align-items: center;
        }

        .fuwu-box2 div:first-child {
            display: inline-block;
            width: 0.4rem;
            height: .12rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
            margin-right: .2rem;
        }

        .fuwu-box2 div:last-child {
            display: inline-block;
            width: 1.3rem;
            height: .12rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
        }

        .fuwu-box div:first-child {
            display: inline-block;
            width: 1.3rem;
            height: .12rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
            margin-right: .2rem;
        }

        .fuwu-box div:last-child {
            display: inline-block;
            width: 0.4rem;
            height: .12rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
        }

        span.jindu::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }

        .big-box {
            float: left;
            width: 7rem;
            height: .5rem;
            margin-top: .273rem;
            border-radius: .3rem;
            background-color: #e1e6dd;
        }

        .small-box {
            width: 5rem;
            height: .5rem;
            border-radius: .3rem;
            background-color: #69af07;
        }

        em {
            float: right;
            font-style: normal;
        }

        .bottom-box {
            display: flex;
            height: 3.5rem;
            justify-content: space-around;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            width: 100%;
            text-align: center;
            margin-top: 0.7rem;
        }

        .bottom-box div.show {
            display: inline-block;
            vertical-align: top;
            font-size: .5rem;
        }

        .bottom-box div {
            display: none;
            border: .0625rem solid #ed060f;
            margin-top: .2rem;
            margin-left: .2rem;
            padding: 0.01rem;
            color: #ed060f;
        }

        @media screen and (max-width: 374px) {
            body {
                /* background: #eee; */
            }
            .item-box {
                width: 10.9rem !important;
            }
            .fuwu .text {
                display: inline-block;
                transform: scale(.9);
            }
            .fuwu-box2 div:last-child,
            .fuwu-box div:first-child {
                width: 1rem;
            }
            .fuwu-box {
                display: flex;
            }
            .big-box {
                margin-right: .5rem;
            }
            .time .right {
                white-space: nowrap
            }
            .container_base {
                padding: 0 .2rem;
                box-sizing: border-box;
            }
        }

        @media screen and (max-width: 300px) {
            .fuwu-box2 div:last-child,
            .fuwu-box div:first-child {
                display: none;
            }
            .fuwu-box div:last-child,
            .fuwu-box2 div:first-child {
                width: 1.7rem;
            }
        }
    </style>
@endsection
@section('content')
    <div class="container_base">
        <span class="header">基础<u>价</u>格表</span>
        <div class="item"></div>
    </div>
@endsection
@section('foot_js')
    <script type="text/javascript" src="/plugin/hostserver/base_price/js/checkPc.js"></script>
    <script src="/plugin/hostserver/base_price/js/moblieautosize.js"></script>
    <script src="/plugin/hostserver/base_price/js/moblie.js"></script>
@endsection
